<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<script src="layui/layui.js"></script>

<body>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">

        </div>
        <div class="layui-col-md6">
            <h4>&nbsp;</h4>
            <h1 style="text-align: center">添加用户</h1>
            <form class="layui-form" id="addForm">
                <table class="layui-table">
                    <tbody>
                    <tr>
                        <th style="text-align: center; width: 100px;">用户名</th>
                        <td style="padding: 0">
                            <input id="userName" type="text" name="userName" lay-verify="title" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">密码</th>
                        <td style="padding: 0">
                            <input id="userPwd" type="password" name="userPwd" lay-verify="title" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">真实姓名</th>
                        <td style="padding: 0">
                            <input id="userRealname" type="text" name="userRealname" lay-verify="title" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">性别</th>
                        <td style="padding: 0">
                            <div class="layui-input-block" style="margin-left: 50px">
                                <input type="radio" name="userGender" value="男" title="男" checked="">
                                <input type="radio" name="userGender" value="女" title="女">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: center; width: 100px;">邮箱</th>
                        <td style="padding: 0">
                            <input id="userEmail" type="text" name="userEmail" lay-verify="title" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">电话</th>
                        <td style="padding: 0">
                            <input id="userPhone" type="text" name="userPhone" lay-verify="title" autocomplete="off" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">身份证号</th>
                        <td style="padding: 0">
                            <input id="userId" type="text" name="userId" lay-verify="title" autocomplete="off" class="layui-input">
                        </td>
                    </tr>

                    <tr>
                        <th style="text-align: center; width: 100px;">出生日期</th>
                        <td style="padding: 0">
                            <input id="userBirthdate" type="date" name="userBirthdate" lay-verify="date" autocomplete="off" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">是否锁定</th>
                        <td style="padding: 0">
                            <div class="layui-input-block" style="margin-left: 0px">
                                <select name="userLock" id="userLock">
                                    <option value="0">解锁</option>
                                    <option value="1">锁定</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">地址</th>
                        <td style="padding: 0">
                            <input id="userAddress" type="text" name="userAddress" lay-verify="title" autocomplete="off" class="layui-input">
                        </td>
                    </tr>
                    <tr>
                        <th style="text-align: center; width: 100px;">用户照片</th>
                        <td style="padding: 0">
                            <div class="layui-upload-drag" id="test10">
                                <div class="layui-input-block" style="margin-left: 0px">
                                    <i class="layui-icon"></i>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                </div>
                                <div class="layui-hide layui-input-block" style="margin-left: 0px" id="uploadDemoView">
                                    <hr>
                                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="text-align: center; margin: 0">
                        <input type="button" value="立即提交" class="layui-btn" onclick="add()"></input>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>
            <h1>&nbsp;</h1>
            <h1>&nbsp;</h1>
        </div>
        <div class="layui-col-md3">

        </div>
    </div>
</body>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.4.1.min.js"></script>

<script>

    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            // ,element = layui.element
            // ,layer = layui.layer;

        //拖拽上传
        upload.render({
            elem: '#test10'
            ,url: 'user/upload'
            ,done: function(res){
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.msg);
                console.log(res)
            }
        });
    });


    function add() {
        $.ajax({
            type: "POST",
            url: "user/addUser",
            data: $("#addForm").serialize(),
            success: function(msg){
                layer.alert('用户添加成功');
            }
        });
    }
</script>


</html>